<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
        <title>用户注册-蜗牛K15在线教育</title>
        <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}"/>
        <link rel="stylesheet" type="text/css" th:href="@{/css/global.css}"/>
        <link rel="stylesheet" type="text/css" th:href="@{/css/web.css}"/>
        <link rel="stylesheet" type="text/css" th:href="@{/css/k15.css}"/>
        <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
        <script th:src="@{/js/jquery.validate.min.js}"></script>
        <script>
            $(function (){
                let account=$("#u-account-reg");
                account.blur(function(){
                    $.getJSON("/member/exist?account="+account.val(),function (r){
                        if(r.code==200){
                            if(r.data){
                                account.next().text("账号已存在")
                            }else{
                                account.next().text("账号可用")
                            }
                        }
                    });
                });

                $("#memberForm").validate({
                    rules:{
                        account:{
                            required:true,
                            minlength: 3,
                            maxlength: 10
                        },
                        password:"required"
                    },
                    messages:{
                        account:{
                            required:"账号不能为空!",
                            minlength:"账号长度不少于3",
                        },
                        password:""
                    }
                })
            })
        </script>
        <style>
            .error{
                border:1px red solid
            }
        </style>
    </head>
    <body class="W-body">
    <div class="in-wrap">
        <header th:replace="~{commons::#header}"/>
        <div id="reg-div" class="bg-fa of">
            <div class="mt10"><p class="e-l-jy"></p></div>
            <form th:action="@{/member/regist}" method="post"  id="memberForm">
                <div>
                    <ol class="e-login-options">
                        <li><input id="u-account-reg" type="text"  placeholder="请输入账号" name="account"/>
                            <span class="lr-tip-wrap"></span></li>
                        <br>
                        <li><input id="u-email-reg" type="text" placeholder="请输入邮箱" name="email"/>
                            <p class="lr-tip-wrap"></p></li>
                        <li><input id="u-mobile-reg" type="text"  placeholder="请输入手机号" name="telphone"/>
                            <p class="lr-tip-wrap"></p></li>
                        <li><input id="u-password-reg" type="password" placeholder="请输入密码" name="password"/>
                            <p class="lr-tip-wrap"></p></li>
                        <li><input id="u-passwordre-reg" type="password" placeholder="请再输入一次密码"/>
                            <p class="lr-tip-wrap"></p></li>
                        <li><input id="u-randomcode-reg" class="fl" style="width: 100px;" type="text"
                                   placeholder="请输入验证码"/>
                            <a href="javascript:void(0)" title="" class="vam ml10 disIb fl"><img
                                    alt="验证码，点击图片更换"
                                    th:src="@{/member/captcha}" width="86" height="40"></a>
                            <span class="c-999 fl ml10">看不清<br><a
                                    href="javascript:void(0)" class="js-verify-refresh c-green">换一张</a>
                                </span>
                            <p class="lr-tip-wrap"><span class="c-red"></span></p>
                            <p class="clear"></p></li>
                    </ol>
                    <section class="mt20 tac">
                        <button class="e-login-btn">注 册</button>
                    </section>
            </form>
        </div>
    </div>
    <!-- 公共底引入 -->
    <footer th:replace="~{commons::#footer}"/>
    </div>
    </body>
    </html>
